<template>
	<div class="page-container">
		<!--新增编辑界面-->
		<el-dialog title="盘库信息" width="80%" :visible.sync="pkViewVisible" class="myHeadClass" :close-on-click-modal="false"
			@opened="getDetials" :before-close="handleClose">

			<div style="float:left;">
				<el-form :model="dataForm" label-width="80px" :inline="true" :rules="dataFormRules" ref="dataForm"
					size="mini" label-position="right">
					<el-form-item label="ID" prop="id" v-if="false">
						<el-input v-model="dataForm.id" disabled="true" auto-complete="off"></el-input>
					</el-form-item>

					<el-form-item label="标题" prop="title">
						<el-input v-model.trim="dataForm.title"></el-input>
					</el-form-item>
					<el-form-item label="单号" prop="doNo">
						<el-input v-model.trim="dataForm.doNo"></el-input>
					</el-form-item>

				</el-form>
			</div>


			<div class="app-container">
				<el-table v-loading="listLoading" :key="componentKey" :data="dto.detList" height="350" border fit
					highlight-current-row style="width: 100%" size="mini">
					<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
						<template slot-scope="scope"> {{ scope.$index + 1 }} </template>
					</el-table-column>
					<el-table-column class-name="status-col" :label="$t('field.itemName')" min-width="110" prop="itemId"
						align="center" fixed="right" header-align="center" :formatter="itemFilter">

					</el-table-column>

					<el-table-column :label="$t('action.operation')" width="205" fixed="right" header-align="center"
						align="center">
						<template slot-scope="scope">
							<kt-delete-button perms="doo:item:delete" v-if="dataForm.status==1" @click="handleDelete(scope.$index, scope.row)" />
						</template>
					</el-table-column>

				</el-table>
			</div>
			<div slot="footer" class="dialog-footer" v-if="dataForm.status == 1">
				<el-button size="mini" type="primary" @click.native="submitForm" v-if="dataForm.status==1"
					:loading="editLoading">{{ $t('action.submit') }}</el-button>
				<el-button size="mini" @click.native="handleAddDetailEdit"  v-if="dataForm.status==1">增加明细 </el-button>
			</div>

		</el-dialog>
		<item-select :itemDialogVisible="itemDialogVisible" @handleSelect="handleSelect"
			@itemHidden="itemHidden"></item-select>



	</div>
</template>

<script>

import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
import Column from "@/views/Core/Column"

import { dictsFormat, getItemName, getItem } from "@/utils/myUtil"

import ItemSelect from "@/views/Basic/Material/ItemSelect"
import KtDeleteButton from "@/views/Core/KtDeleteButton"
export default {
	name: 'PkView',
	components: {

		KtButton,
		ItemSelect,
		Column,
		KtDeleteButton
	},

	props: {

		subDataForm: {
			type: Object
		},
		pkViewVisible: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			dataForm: this.subDataForm,
			listLoading: false,
			dto: { detList: [], deleteIds: [] },
			pageResult: {},
			componentKey: 0,
			editLoading: false,

			itemDialogVisible: false,

		}
	},
	computed: {
		dataFormRules() {
			const dataFormRules = {

				title: [{ required: true, message: "请输入标题", trigger: 'blur' }],
				doNo: [{ required: true, message: "请输入盘库单号", trigger: 'blur' }]
			};
			return dataFormRules;
		},


	},
	methods: {
		itemFilter: function (row, column, cellValue, index) {
			return getItemName(cellValue)
		},

		handleDelete: function (index, row) {
			if (row.id > 0) {
				this.dto.deleteIds.push(row.id)
			}
			this.dto.detList.splice(index, 1)

		},

		handleSelect: function (data) {

			for (var i = 0; i < data.length; i++) {
				this.dto.detList.push({ itemId: data[i].id, unit: data[i].unit, edit: false });
			}
			this.itemHidden();


		},

		handleClose: function (done) {
			this.dto = { detList: [], deleteIds: [] };
			this.$emit('receiptHidden', {})
			done();
		},
		itemHidden: function () {
			this.itemDialogVisible = false;
		},
		// 获取分页数据
		getDetials: function () {

			if (this.dataForm == undefined || this.dataForm.id == undefined || this.dataForm.id == 0) {
				return;
			}
			this.listLoading = true
			this.$api.pk.getDetials(this.dataForm).then((res) => {
				this.dto.detList = res.data

				this.listLoading = false
				this.componentKey += 1;
			})
		},


		handleAddDetailEdit: function () {
			this.componentKey += 1;
			this.itemDialogVisible = true

		},
		handleHiddenOut: function (params) {
			this.$emit('receiptHidden', {})
		},


		// 编辑
		submitForm: function () {
			if (this.dataForm.status == 2 || this.dataForm.status == 3) {
				this.$message({ message: "出库单非待执行状态无法修改", type: 'error' })
			} else {

				this.$refs.dataForm.validate((valid) => {
					if (valid) {
						this.$confirm(this.$t('action.isConfirm'), this.$t('action.tips'), {}).then(() => {
							this.editLoading = true
							this.dto.main = this.dataForm;
							this.dto.main.outType = 2000;
							this.$api.pk.save(this.dto).then((res) => {
								this.editLoading = false
								if (res.code == 200) {

									this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
									this.handleHiddenOut();

								} else {
									this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
								}

							})
						})
					}
				})
			}
		}



	},
	created() {

	},
	mounted() {
		this.getDetials();
	}
}
</script>

<style scoped>.myHeadClass .el-dialog__header {
	background-color: #ff00ff !important;
	;
}</style>